<template>
  <div class="publicpageview">
    <div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="140px">
        <div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
          <el-form-item label="区房屋管理单位：" prop="dname" label-width="140px">
            <el-select :disabled='isluru' clearable v-model="listQuery.dname" @change='areaChange'>
              <div v-for="(item,index) in areaList" :key="index">
                <el-option :label="item.dname" :value="item.did" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="管理部(分中心)：" prop="manageDepartment" label-width="140px">
            <el-select :disabled='isluru' clearable v-model="listQuery.manageDepartment" @change='HouseChange' value-key="aname">
              <div v-for="(item,index) in HouseList" :key="index">

                <el-option :label="item.aname" :value="item" :key="index"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="选择表类型：" prop="biaotype" label-width="180px">
            <el-select disabled v-model="listQuery.biaotype">
           </el-select>
          </el-form-item>
          <el-form-item label="日期：" prop="time" label-width="140px">
            <el-date-picker style="width: 160px;" v-model="listQuery.time" type="date" placeholder="年/月/日">
            </el-date-picker>
          </el-form-item>
        </div>


      </el-form>
      <div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
        <el-button size="mini" type="primary" @click="sumbitCx">查询</el-button>
        <el-button size="mini" @click="returns">重置</el-button>
        <el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
      </div>
    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleUpdate('',1)">导出</el-button>
      <el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">

        <el-table-column align="center" label="所号" prop="blockno">
        </el-table-column>

        <el-table-column align="center" label="门栋号" prop="buildingDoorNo">
        </el-table-column>

        <el-table-column align="center" label="楼层" prop="floorNo">
        </el-table-column>

        <el-table-column align="center" label="单元号" prop="apartmentNo">
        </el-table-column>

        <el-table-column align="center" label="间号" prop="roomNo">
        </el-table-column>

        <el-table-column align="center" label="总间数" prop="roomCount">
        </el-table-column>

        <el-table-column align="center" label="使用面积" prop="usingArea">
        </el-table-column>

        <el-table-column align="center" label="建筑面积" prop="buildingArea">
        </el-table-column>

        <el-table-column align="center" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDayin(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
      </div>
    </div>

    <el-dialog title="详情" :visible.sync="isXiangqing" width="70%" :before-close="handleClose" style="margin-top: 100px;">
      <el-table max-height='500px' v-loading="listLoading" :data="detailQuery" border fit highlight-current-row size="mini">

        <el-table-column align="center" label="档案编号" prop="blockno">
        </el-table-column>

        <el-table-column align="center" label="门栋号" prop="buildingDoorNo">
        </el-table-column>

        <el-table-column align="center" label="楼层" prop="floorNo">
        </el-table-column>

        <el-table-column align="center" label="单元号" prop="apartmentNo">
        </el-table-column>

        <el-table-column align="center" label="间号" prop="roomNo">
        </el-table-column>

        <el-table-column align="center" label="总间数" prop="roomCount">
        </el-table-column>

        <el-table-column align="center" label="使用面积" prop="usingArea">
        </el-table-column>

        <el-table-column align="center" label="建筑面积" prop="buildingArea">
        </el-table-column>
      </el-table>
      <div style="height: 40px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import {
  getArea,
  blockGroupList,
  getHouseAdmin,
  unitPageData
} from '@/api/industry'
export default {
  name: 'AccommodationManagementGonglingguanli',

  data() {
    return {
      listQuery: {
        DID: '',
        AID: '',
        biaotype: '平衡帐',
        blockno: '',
        pageNum: 1,
        pageSize: 20,
        manageDepartment: '',
				dname:''
      },
      total: 0,
      options: [
        {
          key: '1'
        }
      ],
      list: [],
      listLoading: false,
      formData: {
        userId: '',
        userName: '',
        phone: '',
        deptId: '',
        roleId: '',
        userStatus: '1',
        remarks: ''
      },
      type: '',
      value1: '',
      isSearch: false,
      detailQuery: [],
      isXiangqing: false,
      // 区房屋管理单位
      areaList: [],
      // 根据区获取部门
      HouseList: [],
      // 管片列表
      guanpianList: [],
			
				isluru:false
    }
  },

  computed: {
    deptName() {
      return (val) => {
        if (val == '1') {
          return '事业部'
        }
        return '生活部'
      }
    }
  },

  mounted() {
		if(localStorage.getItem('userHouseAdminId')>0){
			this.listQuery.DID = localStorage.getItem('userDID')
			this.listQuery.dname = localStorage.getItem('userDname')
			this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.AID = localStorage.getItem('userHouseAdminId')
			this.isluru = true
		}
    this.total = this.list.length
    this.getArea()
    this.blockGroupList()
    this.unitPageData()
  },

  methods: {
    // 查询
    sumbitCx() {
      this.unitPageData()
    },
    returns() {
       
        (this.listQuery.blockno = ''),
        (this.listQuery.pageNum = 1),
        (this.listQuery.pageSize = 20)
    },
    unitPageData() {
      let data = this.listQuery
      this.listLoading = true
      unitPageData(data).then((res) => {
        // this.list = res.data.list
        this.listLoading = false
				this.total = res.data.total
      })
    },
    // 选择区房屋管理
    areaChange(e) {
      if (e) {
        this.listQuery.areaUnit = e
        this.getHouseAdmin(e)
      }
      this.listQuery.manageDepartment = ''
      this.listQuery.AID = ''
    },
    // 根据区获取部门
    HouseChange(e) {
      console.log(e)
      this.listQuery.manageDepartment = e.aname
      this.listQuery.AID = e.aid
    },

    getArea() {
      getArea().then((res) => {
        console.log(res)
        this.areaList = res.data
      })
    },
    getHouseAdmin(e) {
      getHouseAdmin({
        DID: e
      }).then((res) => {
        this.HouseList = res.data
      })
    },

    // 管片列表
    blockGroupList() {
      let data = {
        group: '',
        groupNumber: '',
        houseAdmin: '',
        pageNum: '',
        pageSize: 99999
      }
      this.listLoading = true
      blockGroupList(data).then((res) => {
        this.guanpianList = res.data.list
        this.listLoading = false
        // this.houseAdminList()
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.unitPageData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.unitPageData()
    },
    getList() {
      this.listLoading = true
      newsPage(this.listQuery).then((response) => {
        this.total = response.data.total
        this.list = response.data.list
        this.listLoading = false
      })
    },

    resetForm(val) {
      console.log('1')
      this.listQuery.DID = ''
      this.listQuery.AID = ''
      this.listQuery.dname = ''
      this.listQuery.manageDepartment = ''
      this.$refs[val].resetFields()
			
    },

    handleAddUser() {
      this.$router.push('chanquanziliaoluru')
    },
    handleUpdate(currentData, type) {
      this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
						let data = this.listQuery
						this.listLoading = true
						unitPageData(data).then((res) => {
            let list = res.data.list
            let outList = []
            res.data.list.forEach((item, index) => {
              outList.push({
                所号: item.blockno,
                门号: item.buildingDoorNo,
                楼层: item.floorNo,
                间号: item.roomNo,
                单元号: item.apartmentNo,
                总间数: item.roomCount,
                使用面积: item.usingArea,
                建筑面积: item.buildingArea
              })
            })
            // 获取表格数据
            const data = outList
            // 转换数据为工作表
            const worksheet = XLSX.utils.json_to_sheet(data)
            // 创建新的工作簿
            const workbook = XLSX.utils.book_new()
            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
            // 导出Excel文件
            XLSX.writeFile(workbook, '房间信息.xlsx')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          })
        })
    },
    handleDayin(row) {
      let list = []
      list.push(row)
      this.detailQuery = list
      this.isXiangqing = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>
<style scoped>
.saveContent {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-bottom: 20px;
}

.title {
  color: #008c93;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.headButton {
  width: 100%;
  display: flex;
  justify-content: end;
}

.title2 {
  color: #008c93;
  margin-bottom: 20px;
  font-weight: bold;
}

.tianjiaButton {
  border: 2px solid #008c93;
  background-color: #fff;
  color: #008c93;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
/deep/.el-input__inner {
  width: 160px;
}
/deep/.publicpaginationview .el-input__inner {
  width: 100px;
}
/deep/.publicpaginationview .is-in-pagination .el-input__inner {
  width: 50px;
}
</style>